<template>
    <view>
        <!-- <u-navbar title="店铺中心" :is-back="false"></u-navbar> -->
        <view class="top u-flex u-flex-col u-row-between">
            <view class="u-flex u-row-between" style="width: 100%">
                <view class="u-flex u-row-between">
                    <image
                        :src="avatar ? cdnurl + avatar : cdnurl + '/static/logo.png'"
                        class="avatar"
                    ></image>
                    <view>
                        <view class="top_tit">{{ shopname }}</view>
                        <view class="top_tel">电话：{{ mobile ? mobile : "暂无" }}</view>
                    </view>
                </view>
                <image
                    :src="cdnurl + '/static/wImg/edit.png'"
                    class="top_edit"
                    @click="$func.jump('/wNew/pages/set')"
                >
                </image>
            </view>
            <view class="top_yel" @click="$func.jump('/yCreate/pages/earnings')">
                <view class="u-flex u-row-between shouyi">
                    <view class="u-flex">
                        <image class="top_mark" :src="cdnurl + '/static/wImg/treetop.png'"></image>
                        <text style="color: #222; font-size: 28rpx; font-weight: bold"
                            >收益中心</text
                        >
                    </view>
                    <view class="u-flex">
                        <text style="color: #222; font-size: 24rpx">点击进入</text>
                        <image
                            :src="cdnurl + '/static/wImg/arrowRig.png'"
                            class="top_right"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
        <view style="padding: 0 30rpx">
            <view class="info">
                <image
                    :src="cdnurl + '/static/wImg/location.png'"
                    style="width: 40rpx"
                    mode="widthFix"
                ></image>
                <view>
                    <view class="in_tit">联系人：{{ sendName ? sendName : "暂无" }}</view>
                    <view class="in_add">{{ sendAddr ? sendAddr : "暂无" }}</view>
                </view>
            </view>
            <view class="info">
                <image
                    :src="cdnurl + '/static/wImg/greHome.png'"
                    style="width: 40rpx"
                    mode="widthFix"
                ></image>
                <view style="flex: 1">
                    <view class="in_tit">商家简介</view>
                    <view class="in_add" v-html="bio"></view>
                </view>
            </view>
        </view>
        <!-- <view class="padding-30 bg-ff radius-10 margin-30 option-title">
            <view class="icon-img">
                <image
                    :src="cdnurl + '/static/yCreate/dt.png'"
                    alt=""
                    style="width: 40rpx"
                    mode="widthFix"
                ></image>
                <span class="flex-one text-30 text-bold margin-lr-30">商家动态</span>
            </view>
            <view class="fbbtn" @tap.stop="toAddDynamic(1)">发布动态</view>
            <view class="padding-top-30 padding-bottom-45 border-bottom-ed flex align-center"
				v-for="(item,index) in trendslist" :key="index">
				<image :src="item.cover" mode="" class="trendsimg radius-10"></image>
				<view class="flex-one margin-left-30">
					<view class="text-28 text-cut-one">{{item.title}}</view>
					<view class="flex align-end margin-top-30">
						<view class="text-24 text-b9 text-cut-one flex-one">{{item.create_time_text}}</view>
						<view class="bjbtn" @click="goBj(item.id)">
							编辑
						</view>
						<view class="delbtn" @click="getDel(item.id)">
							删除
						</view>
					</view>
				</view>
			</view>
        </view> -->
        <view class="padding-30 bg-ff radius-10 margin-30 option-title">
            <view class="icon-img">
                <image
                    :src="cdnurl + '/uploads/image/write.png'"
                    alt=""
                    style="width: 40rpx"
                    mode="widthFix"
                />
                <span class="flex-one text-30 text-bold margin-lr-30">扫码核销</span>
            </view>
            <view class="fbbtn" @tap="goWirte()">扫码核销</view>
        </view>
        <view class="padding-30 bg-ff radius-10 margin-30 option-title">
            <view class="icon-img">
                <image
                    :src="cdnurl + '/uploads/image/write.png'"
                    alt=""
                    style="width: 40rpx"
                    mode="widthFix"
                />
                <span class="flex-one text-30 text-bold margin-lr-30">输码核销</span>
            </view>
            <view class="fbbtn" @tap="goWirteInput()">输码核销</view>
        </view>
        <uni-popup ref="show_item" type="bottom">
            <view class="show-popup pd-lg">
                <view
                    @tap.stop="toAddDynamic(1)"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    >发布图片
                </view>
                <view
                    @tap.stop="toAddDynamic(2)"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    >发布视频
                </view>
                <view
                    @tap.stop="$refs.show_item.close()"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    :style="{ color: primaryColor }"
                    >取消</view
                >
                <view class="space-safe"></view>
            </view>
        </uni-popup>
        <uni-popup ref="write_popup" type="center" @close="wirteCloseInput">
            <view class="show-popup pd-lg write-input-box">
                <view class="write-input-title"> 输码核销 </view>
                <u-input
                    style="margin: 20rpx"
                    placeholder="请输入核销码"
                    border="surround"
                    v-model="wirteCode"
                    @clear="wirteCodeClear()"
                ></u-input>
                <view class="write-input-but">
                    <u-button type="primary" @click="wirteCloseInput()"> 确定 </u-button>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="detail_popup" type="center" @close="detailCloseInput">
            <view class="show-popup pd-lg write-input-box" style="box-sizing: border-box">
                <view class="title" style="padding: 15px 0; font-size: 38rpx; font-weight: bold">
                    商品信息
                </view>
                <!-- v-for="(item, index) in detail.goods" :key="index" -->
                <view class="box" v-for="(item, index) in detail.goods" :key="index">
                    <view class="center">
                        <image :src="BaseUrl + item.image" style="border-radius: 30rpx" />
                        <view class="center-info">
                            <view style="padding-right: 20rpx; box-sizing: border-box">
                                <view class="title line-clamp-2">{{ item.title }}</view>
                                <view class="sub">规格：{{ item.difference }}</view>
                            </view>
                            <view style="text-align: right">
                                <!-- <view class="price">¥{{ i.pay.price }}</view> -->
                                <view class="price">¥{{ detail.pay.price }}</view>
                                <view class="num">x{{ detail.pay.number }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="line" style="margin: 10rpx 0">
                        <view
                            class="left"
                            style="padding: 8rpx 0; display: flex; justify-content: space-between"
                        >
                            <text>预约日期：</text>
                            <text>{{ detailInfo.day }}</text>
                        </view>
                        <view
                            class="left"
                            style="padding: 8rpx 0; display: flex; justify-content: space-between"
                        >
                            <text>预约人数：</text>
                            <text>{{ detailInfo.num }}</text>
                        </view>
                        <view
                            class="left"
                            style="padding: 8rpx 0; display: flex; justify-content: space-between"
                            v-if="detailInfo.time_range"
                        >
                            <text>预约时间：</text>
                            <text>{{ detailInfo.time_range }}</text>
                        </view>
                        <view
                            class="left"
                            style="padding: 8rpx 0; display: flex; justify-content: space-between"
                        >
                            <text>联 系 人：</text>
                            <text>{{ detailInfo.people[0].name || detailInfo.name }}</text>
                        </view>
                        <view
                            class="left"
                            style="padding: 8rpx 0; display: flex; justify-content: space-between"
                        >
                            联系电话：
                            <text>{{ detailInfo.mobile || detailInfo.phone }}</text>
                        </view>
                    </view>
                </view>
                <view class="write-input-but">
                    <u-button type="primary" @click="wirteCodeBut()"> 确认核销 </u-button>
                </view>
            </view>
        </uni-popup>
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabList"
        ></u-tabbar>
    </view>
</template>

<script>
import config from "../../common/config/config.js";
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../utils/req";
export default {
    data() {
        return {
            BaseUrl,
            tabList: [
                {
                    iconPath: BaseUrl + "/static/wdcp-fl.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-dd.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-dd-active.png",
                //     text: "订单",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-sh.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-yf.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-yf-active.png",
                //     text: "运费",
                // },
                {
                    iconPath: BaseUrl + "/static/wdcp-wd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            current: 3,
            avatar: "",
            shopname: "",
            mobile: "",
            sendName: "",
            sendAddr: "",
            bio: "",
            trendslist: [],
            cdnurl: config.cdnurl,
            wirteCode: "",
            detail: {},
            detailInfo: {}, //入住信息
        };
    },
    mounted() {
        var a = document.getElementsByClassName("uni-page-head-hd")[0];
        a.style.display = "none";
    },
    onReady() {
        this.$u.post("/api/shop/shop_details", {}).then((res) => {
            if (res.code == 1) {
                this.avatar = res.data.avatar;
                this.shopname = res.data.shopname;
                this.mobile = res.data.mobile;
                this.sendName = res.data.sendName;
                this.sendAddr = res.data.sendAddr;
                this.bio = res.data.bio;
            }
        });
        this.getList();
    },
    onShow() {
        this.getList();
    },
    methods: {
        hexiaoDetail(code) {
            this.$u
                .post("/api/wanlshop.merchant/confirmOrderDetail", {
                    code: code,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.detail = res.data;
                        this.detailInfo = JSON.parse(res.data.json);
                        console.log(this.detailInfo);
                        this.$refs.detail_popup.open();
                    } else {
                        uni.showToast({
                            duration: 1500,
                            title: res.msg,
                            icon: "error",
                        });
                    }
                });
        },
        hexiao(code) {
            this.$u
                .post("/api/wanlshop.merchant/confirmOrder", {
                    code: code,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showToast({
                            duration: 1500,
                            title: res.msg,
                            icon: "success",
                        });
                    } else {
                        uni.showToast({
                            duration: 1500,
                            title: res.msg,
                            icon: "error",
                        });
                    }
                });
        },
        wirteCodeBut() {
            this.hexiao(this.wirteCode);
            this.$refs.write_popup.close();
            this.$refs.detail_popup.close();
            this.wirteCode = "";
        },
        wirteCodeClear() {
            this.wirteCode = "";
        },
        goWirteInput() {
            this.$refs.write_popup.open();
        },
        goWirte() {
            uni.scanCode({
                scanType: ["qrCode"],
                success: (res) => {
                    if (res.result) {
                        const val = res.result;
                        this.wirteCode = val;
                        this.hexiaoDetail(val);
                    } else {
                        uni.showToast({
                            duration: 1500,
                            title: "请重新扫描",
                            icon: "error",
                        });
                        return false;
                    }
                },
                fail: (res) => {
                    uni.showToast({
                        duration: 1500,
                        title: "未识别二维码",
                        icon: "error",
                    });
                },
            });
        },
        wirteCloseInput() {
            this.hexiaoDetail(this.wirteCode);
            this.$refs.write_popup.close();
            this.$refs.detail_popup.open();
        },
        getList() {
            uni.request({
                url: "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=dynamic/app/IndexDynamicCoach/dynamicList&urls=dynamic/app/IndexDynamicCoach/dynamicList",
                data: {
                    shop_id: uni.getStorageSync("shop_id"),
                },
                header: {
                    autograph: uni.getStorageSync("autograph"),
                },
                success: (res) => {
                    this.trendslist = res.data.data.data;
                },
            });
        },
        changeTab(e) {
            if (e == 0) {
                uni.redirectTo({ url: "/yCreate/pages/goodsManagement" });
            } else if (e == 1) {
                uni.redirectTo({ url: "/yCreate/pages/orderManagement" });
            } else if (e == 2) {
                uni.redirectTo({ url: "/wNew/pages/freight" });
            }
            // else if (e == 3) {
            // uni.redirectTo({ url: "/yCreate/pages/reviewOrder" });
            // }
        },
        toAddDynamic(type) {
            this.$refs.show_item.close();
            uni.navigateTo({
                url: `/wNew/pages/release?type=${type}`,
            });
        },
        getDel(id) {
            uni.request({
                url: "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=dynamic/app/IndexDynamicCoach/delDynamic&urls=dynamic/app/IndexDynamicCoach/delDynamic",
                data: {
                    id: id,
                    shop_id: uni.getStorageSync("shop_id"),
                },
                header: {
                    autograph: uni.getStorageSync("autograph"),
                },
                success: (res) => {
                    var that = this;
                    uni.request({
                        url: "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=dynamic/app/IndexDynamicCoach/dynamicList&urls=dynamic/app/IndexDynamicCoach/dynamicList",
                        data: {
                            shop_id: uni.getStorageSync("shop_id"),
                        },
                        header: {
                            autograph: uni.getStorageSync("autograph"),
                        },
                        success: (res) => {
                            that.trendslist = res.data.data.data;
                        },
                    });
                },
            });
            // return false
            // uni.showModal({
            // 	content: '是否确认删除动态',
            // 	success: function(res) {
            // 		if (res.confirm) {
            // 		} else if (res.cancel) {
            // 		}
            // 	}
            // })
        },
        goBj(id) {
            this.$util.goUrl({
                url: `/wNew/pages/release?id=${id}&type=1`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(@/components/common.css);

.top {
    width: 100%;
    height: 292rpx;
    padding: 32rpx 30rpx 0;
    background: linear-gradient(135deg, #606dce 0%, #61c891 100%);

    .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }

    .top_tit {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
    }

    .top_tel {
        font-size: 28rpx;
        color: #fff;
        margin-top: 12rpx;
    }

    .top_edit {
        width: 36rpx;
        height: 36rpx;
    }

    .top_yel {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background: #f2ddaf;
        padding: 0 30rpx;
        border-radius: 20rpx 20rpx 0 0;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        .top_mark {
            width: 32rpx;
            height: 36rpx;
            margin-right: 20rpx;
        }

        .top_right {
            width: 12rpx;
            height: 24rpx;
            margin-left: 10rpx;
        }
    }
}

.info {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    display: flex;

    image {
        width: 43rpx;
        height: 40rpx;
        // margin-top: 41rpx;
        margin-right: 31rpx;
    }

    .in_tit {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .in_add {
        font-size: 24rpx;
        color: #333;
        margin-top: 10rpx;
    }
}

.dtimg {
    width: 40rpx;
    height: 40rpx;
}

.fbbtn {
    width: 132rpx;
    height: 38rpx;
    background: #27b082;
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 38rpx;
    text-align: center;
}

.show-popup {
    // width: 750rpx;
    background: #f3f3f5;
    border-radius: 30rpx 30rpx 0 0;

    .avatar {
        width: 84rpx;
        height: 84rpx;
    }

    .show-item {
        color: #222;
        height: 100rpx;
        background: #fff;
    }
}

.trendsimg {
    width: 116rpx;
    height: 116rpx;
}

.align-end {
    align-items: flex-end;
}

.text-b9 {
    color: #b9b9b9;
}

.bjbtn {
    width: 109rpx;
    height: 38rpx;
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    border: 1rpx solid #c6c6c6;
    font-size: 24rpx;
    color: #b4b4b4;
    line-height: 38rpx;
    text-align: center;
}

.delbtn {
    width: 109rpx;
    height: 38rpx;
    background: #27b082;
    border-radius: 19rpx 19rpx 19rpx 19rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 38rpx;
    text-align: center;
    margin-left: 10rpx;
}

.option-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-img {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.shouyi {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.write-input-box {
    display: flex;
    align-items: center;
    flex-direction: column;

    .write-input-title {
        padding: 30rpx;
        font-weight: 10rpx;
        font-size: 30rpx;
    }

    .write-input-but {
        width: 31%;
        margin: 20rpx;
    }
}
.center {
    margin: 0 auto;
    // width: 70%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;

    image {
        width: 180rpx !important;
        height: 180rpx !important;
    }

    .center-info {
        flex: 1;
        align-items: center;
        display: flex;
        justify-content: space-between;

        .title {
            font-size: 32rpx;
            line-height: 1.4em;
            // width: 43vw;
            margin-left: 20rpx;
        }

        .sub {
            font-size: 26rpx;
            opacity: 0.5;
            margin-top: 20rpx;
            margin-left: 20rpx;
        }

        .price {
            font-size: 32rpx;
            font-weight: bold;
            line-height: 1.4em;
        }

        .num {
            font-size: 26rpx;
            opacity: 0.5;
            margin-top: 20rpx;
            text-align: right;
        }
    }
}
/deep/.uni-popup__wrapper-box {
    width: 90%;
    margin: 0 auto;
}
</style>
